<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>home</title>
</head>
<body>

<div class="container" th:fragment="index(status)" th:if="${status} eq 1">
    <!--头-->
    <div class="page-header">
        <h1>Welcome</h1>
        <h3>您是第[[${session.visitsCount}]]访问本站的用户</h3>
        <small>Welcome, <span class="text-primary">Administrator</span></small>
    </div>
    <!--三方框-->

    <div class="row">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div id="u277_text" class="text "align="center">
                        <p style="font-size:20px;">
                                <span style="font-weight:400;color:rgba(51, 51, 51, 0.898039215686275);">
                                   总会话量
                                </span>
                        </p><br>
                        <p style="font-size:50px;">
                                <span style="font-weight:650;color:rgba(0, 110, 255, 0.898039215686275);">
                                    [[${session.sessionTotalNumber}]]
                                </span>
                        </p>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body"><div class="chartjs-size-monitor" style="position: absolute; inset: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
                    <div id="u278_text" class="text "align="center">
                        <p style="font-size:20px;">
                                <span style="font-weight:400;color:rgba(51, 51, 51, 0.898039215686275);">
                                     已解决的问题
                                </span>
                        </p><br>
                        <p style="font-size:50px;">
                                <span style="font-weight:650;color:#FF6262;">
                                    [[${session.evaluationDetail}]]
                                 </span>
                        </p>

                    </div>

                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body"><div class="chartjs-size-monitor" style="position: absolute; inset: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
                    <div class="text " align="center">
                        <p style="font-size:20px;">
                                 <span style="font-weight:400;color:rgba(51, 51, 51, 0.898039215686275);">
                                   在线客服数
                                  </span>
                        </p><br>
                        <p style="font-size:50px;">
                                <span style="font-weight:650;color:#2ED477;">
                                  [[${session.listCount}]]
                                </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body"><div class="chartjs-size-monitor" style="position: absolute; inset: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
                    <div class="text " align="center">
                        <p style="font-size:20px;">
                                 <span style="font-weight:400;color:rgba(51, 51, 51, 0.898039215686275);">
                                   好评率
                                  </span>
                        </p><br>
                        <p style="font-size:50px;">
                                <span style="font-weight:650;color:#9f94e3;">
                                  %[[${session.goodEvaluationRate}]]
                                </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title d-flex justify-content-between">
                        <span>work-order</span>
                        <span class="dropdown">
                                <a href="#" data-toggle="dropdown" aria-haspopup="true"
                                   aria-expanded="false">
                                    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                                </a>
                                <span class="dropdown-menu dropdown-menu-right">
                                    <a href="#" class="dropdown-item">Action</a>
                                    <a href="#" class="dropdown-item">Another action</a>
                                    <a href="#" class="dropdown-item">Something else here</a>
                                </span>
                            </span>
                    </h6>
                </div>
                <div id="indexChat"></div>
            </div>
        </div>
        <div class="col-md-4 ">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title text-center" style="font-size: 25px;">快捷方式</h6>

                    <div style="display: inline-block" class="mr-2 mb-3">
                        <a type="button" class="btn btn-outline-primary" href="/session/getall">会话</a>
                    </div>
                    <div style="display: inline-block" class="mr-2 mb-3">
                        <a type="button" class="btn btn-outline-primary" href="/visitor">访客</a>
                    </div>
                    <div style="display: inline-block" class="mr-2 mb-3">
                        <a type="button" class="btn btn-outline-primary" href="javascript:void(0)">统计</a>
                    </div>
                    <div style="display: inline-block" class="mr-2 mb-3">
                        <a type="button" class="btn  btn-outline-primary" href="javascript:void(0)">设置</a>
                    </div>
                    <div style="display: inline-block" class="mr-2 mb-3">
                        <a type="button" class="btn btn-outline-primary" href="/customerManage/customerTables">客户管理</a>
                    </div>
                    <div style="display: inline-block" class="mr-2 mb-3">
                        <a type="button" class="btn btn-outline-primary" href="/chatHistory">会话历史</a>
                    </div>

                    <div style="display: inline-block" class="mr-2 mb-3">
                        <a type="button" class="btn btn-outline-primary" href="/orderManager">工单管理</a>
                    </div>
                                    <!--快捷入口-->
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title" style="font-size: 25px;text-align: center">网站总访问量</h6>
                    <div class="text-center">

                        <div class=" mb-2 font-weight-bold text-success"style="font-size: 70px;line-height: 60px">
                            [[${session.visitsCount}]]
                        </div>

                    </div>
                    <div class="mt-1 text-center mr-2" style="font-size: 14px; display: inline-block"  th:each="v:${session.viewStatistic}">
                        [[${v.viewtype}]]:[[${v.visitorcount}]]
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <!--客服控制-->
                <div class="card-body">
                    <div class="table-responsive" tabindex="-1" style="overflow-x: auto; outline: none;">
                        <h6 class="card-title">客服监控</h6>
                        <table class="table table-hover">
                            <thead class="thead-light"style="background-color: #2ea8e5">
                            <tr>
                                <th>nickName</th>
                                <th>State</th>
                                <th>customerServiceid</th>
                                <th>customerservicephone</th>
                                <th>onlinetimebegin</th>
                                <th>onlinetimeend</th>
                                <th>totalOnlineTime</th>
                                <th>serviceGroup</th>
                                <th class="text-right">servicerole</th>
                            </tr>
                            </thead>
                            <tbody >
                            <tr th:each="ls : ${session.list}">
                                <td>[[${ls.nickname}]]</td>
                                <td style="color: #00a345">[[${ls.state}]]</td>
                                <td>[[${ls.customerserviceid}]]</td>
                                <td>[[${ls. customerservicephone}]]</td>
                                <td>[[${ls. onlinetimebegin}]]</td>
                                <td>[[${ls. onlinetimeend}]]</td>
                                <td>[[${ls.totalonlinetime}]]</td>
                                <td>[[${ls.servicegroup}]]</td>
                                <td>[[${ls.servicerole}]]</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

</body>
</html>